<template>
  <a-modal
    title="新增参数"
    :width="480"
    :visible="visible"
    :confirmLoading="loading"
    @ok="_submit"
    @cancel="_cancel">
    <a-spin :spinning="loading">
      <a-form :form="form" layout="vertical">
        <a-form-item label="项目类型">
          <a-select
            placeholder="请选择项目类型"
            v-decorator="['moduleType', { rules: [{ required: true, message: '请选择项目类型,项目类型不能为空！' }] }]"
            @change="_moduleTypeChange"
          >
            <a-select-option :value="1"> 企业签约 </a-select-option>
            <a-select-option :value="2"> 个人签约 </a-select-option>
            <a-select-option :value="3"> 价格信息 </a-select-option>
            <a-select-option :value="4"> 附加信息 </a-select-option>
            <a-select-option :value="5"> 自定义信息 </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="签约方"
          v-if="form.getFieldsValue().moduleType == 1 || form.getFieldsValue().moduleType == 2"
        >
          <a-select
            placeholder="请选择签约方"
            v-decorator="['bindParamName', { rules: [{ required: true, message: '请选择签约方,签约方不能为空！' }] }]"
          >
            <a-select-option :value="item.paramName" v-for="item in paramsListFilter" :key="item.paramName">
              {{ item.paramName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="名称" v-if="form.getFieldsValue().moduleType == 5">
          <a-input v-decorator="['moduleName', { rules: [{ required: true, message: '名称不能为空!' }] }]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['moduleType', 'bindParamName', 'moduleName']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    paramsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      paramsListFilter: []
    }
  },
  methods: {
    /**
     * 项目类型选择
     */
    _moduleTypeChange (data) {
      if (data === 1) {
        this.paramsListFilter = this.paramsList.filter((item) => {
          return item.paramType === 5
        })
      } else if (data === 2) {
        this.paramsListFilter = this.paramsList.filter((item) => {
          return item.paramType === 6
        })
      }
    },
    /**
     * 提交表单
     */
    _submit: function () {
      this.$emit('ok')
    },
    /**
     * 取消
     */
    _cancel: function () {
      this.$emit('cancel')
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted () {}
}
</script>
